<template>
  <div>
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="margin-bottom: 2em; font-size: 0.8rem"
    >
      <el-breadcrumb-item :to="{ path: '/admin.html' }"
        >管理首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户信息管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input
          placeholder="模糊搜索条件"
          v-model="searchForm.userPhone"
          style="width: 20rem"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="doSearchForm()"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          type="success"
          icon="el-icon-plus"
          @click="add.dialogVisible = true"
          >增加</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 用户权限循环遍历显示 -->

    <el-table :data="tableData" border style="width: 100%" v-model="tableData">
      <el-table-column
        prop="userPhone"
        label="电话号码"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="schoolName"
        label="学校名称"
        width="340"
        align="center"
      >
      </el-table-column>

      <el-table-column prop="roleName" label="角色" width="250" align="center">
      </el-table-column>
      <el-table-column
        prop="userCreateDate"
        label="创建时间"
        width="300"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="info" @click="doUpdate(scope.row)">修改</el-button>
          <el-button type="danger" @click="doDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 增加 -->
    <el-dialog title="新增" :visible.sync="add.dialogVisible" width="30%">
      <el-form ref="form" :model="add.form" label-width="90px">
        <el-form-item label="电话号码">
          <el-input v-model="add.form.userPhone"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="add.form.userPwd"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="add.form.roleId" placeholder="请选择">
            <el-option
              v-for="item in roleData"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在学校">
          <el-select v-model="add.form.schoolId" placeholder="请选择">
<el-option
             
              :label="'请选择学校'"
              :value="add.form.schoolId"
            >
            </el-option>
            <el-option
              v-for="item in schoolD"
              :key="item.schoolId"
              :label="item.schoolName"
              :value="item.schoolId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="add.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAdd()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="修改" :visible.sync="update.dialogVisible" width="30%">
      <el-form ref="form" label-width="90px">
        <el-form-item label="电话号码">
          <el-input v-model="update.form.userPhone"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="update.form.userPwd"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="update.form.roleId" placeholder="请选择">
            <el-option
              v-for="item in roleData"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在学校">
          <el-select v-model="update.form.schoolId" placeholder="请选择">
            <el-option
              v-for="item in schoolD"
              :key="item.schoolId"
              :label="item.schoolName"
              :value="item.schoolId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="update.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doUpdateFrom()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import user from "/src/api/user";
import role from "/src/api/role";
import school from "/src/api/school";

export default {
  data() {
    return {
      add: {
        dialogVisible: false,
        form: {
          userPhone: "",
          userPwd: "123456",
          roleId: 1,
          schoolId: null,
        },
      },
      update: {
        dialogVisible: false,
        form: {},
      },
      searchForm: {
        userPhone: "",
      },
      form: {
        userPhone: "",
      },
      tableData: [],
      roleData: [],
      schoolD: [],
    };
  },

  mounted() {
    this.search();
    this.roleSearch();
    this.schoolSearch();
  },

  methods: {
    //模糊查询方法
    doSearchForm() {
      this.form = { ...this.form, ...this.searchForm };
      this.search();
    },
    search() {
      user
        .selectAll(this.form)
        .then((response) => {
          this.tableData = response.data.data;
        })
        .catch((error) => {
          console.warn(error);
        });
    },

    doAdd() {
      user.add(this.add.form).then((r) => {
        if (r.data.ok) {
          this.$message.success("添加成功");
          this.search();
          this.add.form = {
            userPhone: "",
            userPwd: "123456",
            roleId: 1,
            schoolId: null,
          };
          this.add.dialogVisible = false;
        }
      });
    },
    roleSearch() {
      role.get().then((r) => {
        this.roleData = r.data.data;
      });
    },
    schoolSearch() {
      school.select().then((r) => {
        this.schoolD = r.data.data;
      });
    },
    doDelete(row) {
      this.$confirm(`确定删除！`).then(() => {
        let ps = {};
        ps.userId = row.userId;
        ps.userStatus = 0;
        user.updateuserStatus(ps).then((r) => {
          if (r.data.ok) {
            this.$message.success("删除成功！");
            this.search();
          }
        });
      });
    },
    //修改
    doUpdate(row) {
      this.update.form = { ...row };
      this.update.dialogVisible = true;
    },
    doUpdateFrom() {
      console.info("==>",this.update.form)
      user.updateKey(this.update.form).then((r) => {
        if (r.data.ok) {
          this.$message.success("修改成功");
          this.search();
          this.update.dialogVisible = false;
        }
      });
    },
    // method end
  },
};
</script>

<style scoped>
.el-pagination {
  text-align: center;
  margin: 0.5rem 0;
}
.demo-form-inline {
  margin-left: 20rem;
}
.demo-form-inline > :nth-child(2) {
  margin-right: 30rem;
}
</style>